<script setup lang="ts">
import { computed } from 'vue'
import type { ViewChartLineProps } from './index.d'
import {
  DEFAULT_DATASET,
  DEFAULT_OPTION,
  createOptionSeries,
} from './index'

defineOptions({
  name: 'ViewChartLine',
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<ViewChartLineProps>(),
  {
    option: () => ({} as any),
    dataset: () => DEFAULT_DATASET,
    isAreaShadow: false,
    isLineShadow: true,
    peak: false,
    autoresize: false,
  },
)

const handlerOption = computed(() => ({
  ...DEFAULT_OPTION,
  ...props.option,
  series: createOptionSeries(
    props.dataset,
    props.markLine,
    props.option,
    {
      isAreaShadow: props.isAreaShadow,
      isLineShadow: props.isLineShadow,
      peak: props.peak,
    },
  ),
  dataset: props.dataset,
}))
</script>

<template>
  <b-chart
    :option="handlerOption"
    :autoresize="autoresize"
    class="view-chart-line box-border"
    v-bind="$attrs"
  />
</template>
